/**
 * 报事咨询
 * @author truexin
 * @date   2016/05/17
 */

import {pension} from "../const/pension";
import PullRefresh from '../components/mui/PullRefresh.js';
import NoData from "../components/NoData";

(function (lf, r) {
    
    var ajax = lf.utils.ajax,
        content = '',
        len = 100,
        fmt = 'yyyy-MM-dd hh:mm:ss',
        eventId = lf.utils.getUrlParam('eventId'),
        RC = r.createClass,
        getUrlParam = lf.utils.getUrlParam;
    
    let flag = getUrlParam('suggest');
    
    var Person = RC({
        render() {
            if (flag == pension.type.relative || flag == pension.type.doctor) {
                
                var data = this.props.data,
                    user = this.props.user,
                    createTime = lf.utils.format(data.createTime, fmt);
                
                return (
                    <div className='consult-content pension'>
                        <div className="head-img">
                            <img src="../public/images/finger/me-head.png"/>
                            <i className="text-dot">{flag == pension.type.doctor ? data.staffName : data.sender}</i>
                        </div>
                        <p >
                            <i className="arrow"></i>
                            {flag == pension.type.doctor ?
                                <span className="suggest text-dot">
                                    {data.suggestType == 1 ? '饮食建议' :
                                        data.suggestType == 3 ? '锻炼建议' :
                                            data.suggestType == 2 ? '医药建议' :
                                                null
                                    }
                                </span> : null
                            }
                            {
                                flag == pension.type.doctor ? <br/> : null
                            }
                            {data.content}
                        </p>
                        <b>{createTime}</b>
                    </div>
                )
            } else {
                
                var data = this.props.data,
                    user = this.props.user,
                    createTime = lf.utils.format(data.createTime, fmt),
                    reviewTime = lf.utils.format(data.reviewTime, fmt);
                
                return (
                    <div className={data.status == 2 ? 'consult-content': 'person-content'}>
                        <div className="head-img">
                            <img
                                src={data.status == 2 ? "../public/images/finger/report.png" :
                                (user.pic ? user.pic : "../public/images/finger/defaultHead.png")}/>
                            <i className="text-dot">{data.creatorName}</i>
                        </div>
                        <p>{data.content} <i className="arrow"></i></p>
                        <b>{data.status == 2 ? reviewTime : createTime}</b>
                    </div>
                )
            }
        }
        
    });
    
    var Sendor = RC({
        getInitialState () {
            return ({
                disabled: false,
            })
        },
        checkSubmit () {
            content = $(r.findDOMNode(this.refs.input)).val();
            if (!$.trim(content)) return false;  //注意这里输入空格默认为存在value文本
            return content;
        },
        submit () {
            var me = this;
            if (me.checkSubmit()) {
                me.setState({
                    disabled: true,
                });
                if (content.length <= len) {
                    ajax({
                        type: 'post',
                        contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                        data: {
                            eventId: eventId,
                            content: content,
                            creatorName: me.props.user.name
                        },
                        success: function (data) {
                            if (data.code == '200') {
                                mui.toast('已经收到您的咨询，我们会尽快回复的！');
                                location.reload();
                            }
                        }
                    }, lf.finger.api.event.eventConsult);
                } else {
                    mui.toast('咨询内容不可以超过100字！');
                }
            } else {
                mui.toast('请先填写咨询内容');
            }
            return;
        },
        
        render () {
            return (
                <div className="send-btns">
                    <ul>
                        <li><input type="text" ref='input' placeholder="请输入咨询内容..."/></li>
                        <li>
                            <button disabled={this.state.disabled} type="submit" onClick={this.submit}></button>
                        </li>
                    </ul>
                </div>
            )
        }
    });
    
    var Body = RC({
        getInitialState () {
            return ({
                list: [],
                itemList: [],
            })
        },
        getList(page){
            var me = this;
            
            if (flag == pension.type.relative || flag == pension.type.doctor) {
                
                let api = flag == pension.type.doctor ?
                pension.api.prefix + pension.api.getSuggests :
                pension.api.prefix + pension.api.getRelative;
                
                ajax({
                    type: 'get',
                    url: api,
                    data: {
                        phone: me.props.user.mobile || (me.props.user.custLoginVo && me.props.user.custLoginVo.mobile),
                        page: page,
                        pageSize: 6,
                    },
                    success: function (data) {
                        
                        let itemList = me.state.itemList;
                        itemList.push(...data.dataList);//ES6 合并数组新写法
                        
                        mui('#pullrefresh')
                            .pullRefresh()
                            .endPullupToRefresh((itemList.length == data.maxCount)); //refresh completed
                        
                        var list = !itemList.length ?
                            <NoData data={{span_text:'还没有内容哦~'}}/> :
                            itemList.map(function (data) {
                                return (
                                    <Person key={data.id} data={data} user={me.props.user}/>
                                )
                            });
                        
                        me.setState({
                            list: list
                        });
                        
                    }
                })
            } else {
                ajax({
                    type: 'POST',
                    data: {
                        eventId: eventId,
                    },
                    success: function (data) {
                        console.log(data)
                        var list = !data.dataList.length ?
                            <NoData data={{span_text:'还没有咨询内容哦~'}}/> :
                            data.dataList.map(function (data) {
                                return (
                                    <Person key={data.id} data={data} user={me.props.user}/>
                                )
                            });
                        me.setState({
                            list: list,
                        });
                    }
                }, lf.finger.api.event.consultList);
            }
        },
        componentWillMount() {
            this.getList(1);
        },
        componentWillReceiveProps: function (nextProps) {
            this.getList(nextProps.page);
        },
        render () {
            return (
                <div className="report-consult">
                    {
                        flag == pension.type.relative || flag == pension.type.doctor ?
                            this.state.list :
                            <div>
                                <PullRefresh data={this.state.list}/>
                                <Sendor user={this.props.user}/>
                            </div>
                        
                    }
                </div>
            );
        }
    });
    
    const PullRefreshCon = RC({
        getInitialState() {
            return {
                page: 1,
            }
        },
        pullupFn () {
            let newPage = ++this.state.page;
            this.setState({page: newPage});
        },
        render() {
            return <PullRefresh pullupFn={this.pullupFn} data={<Body page={this.state.page} user={this.props.user}/>}/>;
        }
    });
    
    lf.bridgeJs.getUser(function (user) {

        flag == pension.type.relative ? lf.appJs.setTitle('亲情关怀') :
            flag == pension.type.doctor ?
                lf.appJs.setTitle('医生建议') : null;

        r.render(
            <div>
                {
                    flag == pension.type.relative || flag == pension.type.doctor ?
                        <PullRefreshCon user={user}/> :
                        <Body user={user}/>
                }
            </div>,
            document.getElementById('root'),
            function () {
                $('#root').css({
                    'min-height': '100vh',
                })
                if (flag == pension.type.relative || flag == pension.type.doctor) {
                    $('.mui-scroll-wrapper').css({
                        'bottom': '0'
                    })
                }
            }
        )
    });
    
})(liefeng, React)
